<template>
  <div class="page-wrapper">
    <!-- 步骤条区域 -->
    <div class="step-container">
      <el-steps
        style="width: 100%"
        align-center
        :active="activeStep - 1"
        finish-status="success"
        @step-click="handleStepClick"
      >
        <el-step title="申请请假" :status="getStepStatus(1)" />
        <el-step title="申请审批" :status="getStepStatus(2)" />
        <el-step title="请假结果" :status="getStepStatus(3)" />
      </el-steps>
    </div>

    <!-- 动态渲染子组件（添加数据传递） -->
    <div class="content-area">
      <component
        :is="currentComponent"
        :step-num="activeStep"
        :prev-form="prevStepData"
        :leave-id="leaveId"
        @go-back="handleChildGoBack"
        @submit-success="handleChildSubmitSuccess"
        @back-to-list="handleBackToList"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch,onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
const route = useRoute();

// 导入子组件
import leave1 from "./leavecomponents/leave1.vue";
import leave2 from "./leavecomponents/leave2.vue";
import leave3 from "./leavecomponents/leave3.vue";

// 步骤状态管理
const activeStep = ref(1);
const finishedSteps = ref([]); // 这个状态我们仍保留，用于步骤条的对号显示
const router = useRouter();
const prevStepData = ref({}); // 新增：用于存储上一步骤的数据
const leaveId = ref("");

const stepComponents = [
  { step: 1, component: leave1 },
  { step: 2, component: leave2 },
  { step: 3, component: leave3 },
];
// 新增：监听 activeStep 变化，当进入步骤3时自动标记为已完成
watch(
  () => activeStep.value,
  (newVal) => {
    // 当步骤切换到3时，自动将步骤3加入已完成列表
    if (newVal === 3 && !finishedSteps.value.includes(3)) {
      finishedSteps.value.push(3);
    }
  }
);
// 计算当前显示的子组件
const currentComponent = computed(() => {
  const target = stepComponents.find((item) => item.step === activeStep.value);
  return target ? target.component : leave1;
});

// 步骤条状态判断
const getStepStatus = (step) => {
  if (finishedSteps.value.includes(step)) return "success";
  if (step === activeStep.value) return "process";
  return "wait";
};

// 处理子组件的“返回”事件
const handleChildGoBack = () => {
  // 点击返回按钮，直接跳转到指定的列表页面
  router.push("/togetherwork/togetherwork1/myapply");
};

// 新增：处理返回列表事件
const handleBackToList = () => {
  router.push("/togetherwork/togetherwork1/myapply");
};

// 处理子组件的“提交成功”事件
const handleChildSubmitSuccess = (formData) => {
  // 保存当前步骤数据
  prevStepData.value = formData || {};

  // 标记步骤为已完成
  if (!finishedSteps.value.includes(activeStep.value)) {
    finishedSteps.value.push(activeStep.value);
  }

  if (activeStep.value < 3) {
    activeStep.value++;
    ElMessage.success("提交成功，进入下一步");
  } else {
    ElMessage.success("所有步骤已完成！");
    router.push("/togetherwork/togetherwork1/myapply");
  }
};

// 步骤条点击切换
const handleStepClick = (step) => {
  const clickedStep = step.index + 1;
  if (clickedStep <= activeStep.value) {
    activeStep.value = clickedStep;
  }
};
onMounted(() => {
  const leaveId1 = route.query.leaveId;
  console.log("当前请假单ID:", leaveId1);
  leaveId.value = leaveId1;
  const step = route.query.stepNo; //"3"
  // 指明步骤
  if (step) {
    activeStep.value = Number(step);
    console.log("当前步骤为" + step);
  }
  

});
</script>

<style scoped>
/* 样式不变 */
.page-wrapper {
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}
.step-container {
  margin-bottom: 24px;
}
.content-area {
  flex: 1;
  min-height: 300px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 24px;
  background: #fff;
}
</style>